<style lang="less">
    @import './styles/infor-card.less';
</style>

<template>
    <Card :padding="0">
        <div class="infor-card-con">
            <Col span="8" class="height-100">
                <router-link :to="valRouter">
                    <Row type="flex" align="middle" justify="center" class="height-100">
                        <count-up 
                            class="infor-card-count user-created-count" 
                            :idName="idName+1" 
                            :endVal="val"
                            :color="color"
                            :countSize="countSize"
                            :countWeight="countWeight"
                        >
                            <p class="infor-intro-text" slot="intro">{{ valText }}</p>
                        </count-up>
                    </Row>
                </router-link>
            </Col>
            <Col class="infor-card-icon-con" :style="{backgroundColor: color, color: 'white'}" span="8">
                <!-- <Row class="height-100" type="flex" align="middle" justify="center">
                    <Col type="flex" align="middle" justify="center">
                        <Icon :type="iconType" :size="iconSize"></Icon>
                        <p class="infor-intro-text2">{{ totalText }}</p>
                    </Col>
                </Row> -->
                <router-link :to="totalRouter">
                    <Row type="flex" align="middle" justify="center" class="height-100">
                        <count-up
                            class="infor-card-count user-created-count" 
                            :idName="idName+2" 
                            :endVal="totalVal"
                            color="white"
                            :backgroundcolor="color"
                            :countSize="countSize"
                            :countWeight="countWeight"
                        >
                            <p class="infor-intro-text" slot="intro" style="color:white;">{{ totalText }}</p>
                        </count-up>
                    </Row>
                </router-link>
            </Col>
            <Col span="8" class="height-100">
                <Row type="flex" align="middle" justify="center" class="height-100">
                    <count-up 
                        class="infor-card-count user-created-count" 
                        :idName="idName+3" 
                        :endVal="monthVal"
                        :color="color"
                        :countSize="countSize"
                        :countWeight="countWeight"
                    >
                        <p class="infor-intro-text" slot="intro">本月数量</p>
                    </count-up>
                </Row>
            </Col>
        </div>
    </Card>
</template>

<script>
import countUp from './countUp.vue';

export default {
    name: 'inforCard',
    components: {
        countUp
    },
    props: {
        idName: String,
        
        val: Number,
        valText: String,
        valRouter: Object,

        totalText: String,
        totalVal: Number,
        totalRouter: Object,
        
        monthVal:Number,

        color: String,
        iconType: String,
        countSize: {
            type: String,
            default: '30px'
        },
        countWeight: {
            type: Number,
            default: 700
        },
        iconSize: {
            type: Number,
            default: 40
        }
    }
};
</script>

